<template>
  <view class="answer-detail-page">
    <view class="top">
      <!-- 导航栏 -->
      <s-nav-bar
        :title="pageTitle"
        :background="'transparent'"
        :titleStyle="{ color: '#ffff', fontWeight: 'bold' }"
        statusBar
        immersive
        back
        :backStyle="{ color: '#fff' }"
      />

      <!-- 顶部区域 -->
      <view class="info">
        <view class="info-right">
          <view class="name">{{ answerData.questionnaire_title }}</view>
          <view class="company">{{ answerData.respondent_name }}</view>
        </view>
      </view>
    </view>

    <!-- 主内容区域 -->
    <scroll-view scroll-y="true" class="main">
      <!-- 基本信息卡片 -->
      <view class="info-card">
        <view class="card-title">回答信息</view>
        <view class="info-row">
          <text class="label">回答ID：</text>
          <text class="value">{{ answerData.id }}</text>
        </view>
        <view class="info-row">
          <text class="label">回答时间：</text>
          <text class="value">{{ formatDateTime(answerData.created_at) }}</text>
        </view>
        <view class="info-row">
          <text class="label">IP地址：</text>
          <text class="value">{{ answerData.respondent_ip }}</text>
        </view>
        <view class="info-row" v-if="respondentInfo.user_agent">
          <text class="label">用户代理：</text>
          <text class="value">{{ respondentInfo.user_agent }}</text>
        </view>
      </view>

      <!-- 问题回答列表 -->
      <view class="section-title">问题回答</view>
      <view class="question-list">
        <view
          class="question-item"
          v-for="(item, index) in answerDetails"
          :key="index"
        >
          <view class="quest-title">
            <view class="question-text">
              {{ item.question_text }}
            </view>
            <!-- 特殊标记 -->
            <view class="special-tags">
              <text v-if="item.is_name === '1'" class="tag name-tag">姓名</text>
              <text v-if="item.is_date === '1'" class="tag date-tag">日期</text>
            </view>
          </view>
          <view class="answer-content">
            <!-- 文本类型问题 -->
            <text v-if="item.question_type === 'text'">{{
              item.answer_content
            }}</text>

            <!-- 单选类型问题 -->
            <text v-if="item.question_type === 'radio'">{{
              item.answer_content
            }}</text>

            <!-- 多选类型问题 -->
            <view v-if="item.question_type === 'check'" class="check-answers">
              <text>
                {{ item.answer_content}}
              </text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import sNavBar from '@/uni_modules/s-ui/components/s-nav-bar/s-nav-bar.vue'

export default {
  components: {
    sNavBar
  },
  data() {
    return {
      answerData: {
        id: "",
        questionnaire_id: "",
        questionnaire_title: "",
        respondent_ip: "",
        respondent_info: "",
        created_at: "",
        respondent_name: "",
      },
      answerDetails: [],
      respondentInfo: {},
      pageTitle: "回答详情",
    };
  },
  onLoad(options) {
    if (options.id) {
      this.loadAnswerDetail(options.id);
    }
  },
  methods: {
    // 加载回答详情
    async loadAnswerDetail(answerId) {
      uni.showLoading({ title: "加载中..." });
      try {
        const res = await this.sjuAjax.get("/answer/detail", { id: answerId });
        if (res && res.code === 200) {
          this.answerData = res.data.answer;
          this.answerDetails = res.data.details;
          this.pageTitle = res.data.title || "回答详情";

          // 解析respondent_info
          try {
            this.respondentInfo = JSON.parse(
              this.answerData.respondent_info || "{}"
            );
          } catch (e) {
            console.error("解析respondent_info失败:", e);
            this.respondentInfo = {};
          }
        }
      } finally {
        uni.hideLoading();
      }
    },

    // 格式化日期时间
    formatDateTime(dateString) {
      if (!dateString) return "";
      const date = new Date(dateString);
      return `${date.getFullYear()}-${(date.getMonth() + 1)
        .toString()
        .padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")} ${date
        .getHours()
        .toString()
        .padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}`;
    },

    // 解析问题选项
    parseQuestionOptions(options) {
      try {
        return options ? JSON.parse(options) : {};
      } catch (e) {
        console.error("解析问题选项失败:", e);
        return {};
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.answer-detail-page {
  width: 100vw;
  min-height: 100vh;
  background-color: var(--v-bg);
  display: flex;
  flex-direction: column;
}


/* 顶部区域 */
.top {
  width: 100vw;
  height: 360rpx;
  background: var(--v-linear);
  flex-shrink: 0;
  border-radius: 0 0 30rpx 30rpx;

  .info {
    width: 90%;
    display: flex;
    align-items: center;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;

    /* 右侧信息 */
    .info-right {
      display: flex;
      flex-direction: column;
      .name {
        margin-bottom: 10rpx;
      }
      .name {
        font-size: 44rpx;
        letter-spacing: 4rpx;
        color: #fff;
        text-shadow: 4rpx 4rpx 8rpx rgba(0, 0, 0, 0.4);
        line-height: 1.2;
      }

      .company {
        font-size: 28rpx;
        color: rgba(255, 255, 255, 0.9);
        text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.3);
      }
    }
  }
}
.quest-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 主内容区域 */
.main {
  position: relative;
  top: -50rpx;
  padding: 0 30rpx;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 0;
  box-sizing: border-box;
}

/* 信息卡片 */
.info-card {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

  .card-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
    padding-bottom: 10rpx;
    border-bottom: 1rpx solid #eee;
  }

  .info-row {
    display: flex;
    margin-bottom: 15rpx;
    font-size: 28rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .label {
      color: #666;
      width: 150rpx;
    }

    .value {
      color: #333;
      flex: 1;
      word-break: break-all;
    }
  }
}

/* 分段标题 */
.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin: 30rpx 0 20rpx;
  padding-left: 10rpx;
  border-left: 8rpx solid var(--v-theme);
}

/* 问题列表 */
.question-list {
  background: #fff;
  border-radius: 12rpx;
  padding: 0 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.question-item {
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f5f5f5;

  &:last-child {
    border-bottom: none;
  }

  .question-text {
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 15rpx;
  }

  .answer-content {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;

    .check-answers {
      display: flex;
      flex-wrap: wrap;
    }
  }

  .special-tags {
    margin-top: 15rpx;
    display: flex;

    .tag {
      font-size: 22rpx;
      padding: 4rpx 12rpx;
      border-radius: 6rpx;
      margin-right: 10rpx;

      &.name-tag {
        background: #e8f4ff;
        color: #409eff;
      }

      &.date-tag {
        background: #f0f9eb;
        color: #67c23a;
      }
    }
  }
}
</style>